<template>

  <div class="searchResult w-1400">

    <div class="search-tips">搜索结果：共搜索到“{{ $route.query.keyword }}”相关的<span class="text-value">{{ page.totalCount }}</span>条结果
    </div>
    <div class="btn-box">
      <el-button :class="activeBtn == 'online' ? 'btn-sel' : 'btn-nosel'" @click="selBtn('online')">
        线上产品（{{ productPage.totalCount }}）
      </el-button>
      <el-button :class="activeBtn == 'store' ? 'btn-sel' : 'btn-nosel'" @click="selBtn('store')">
        实体店面（{{ page.totalCount }}）
      </el-button>
    </div>
    <div class="list" v-show="activeBtn == 'online' && productList.length>0">
      <div v-for="(item, index) in productList" :key="index" class="list-item" @click="openDetail(item)">
        <img :src="item.image" class="company-icon" />
        <div class="material">{{ item.title }}</div>
        <div class="name">{{ item.company_name }}</div>
        <div class="info">
          <div>
            <img src="@/static/engineering5188/goodsAndServices/address.png" />
            <span class="address">{{ item.province }}{{ item.city }}{{ item.district }}</span>
          </div>
          <div class="date">{{ item.created_at ? item.created_at.split(' ')[0]:'' }}</div>
        </div>
      </div>
    </div>
    <div class=" nodata" v-show="activeBtn == 'online' && productList.length == 0">
      暂无数据
    </div>
    <div class="pagination" v-if="pageProductCount > 0 && activeBtn == 'online'">
      <el-button :disabled="page.page == 1" @click="selProductPage(1)" class="btn-prev1">
        首页
      </el-button>
      <el-pagination  @current-change="handleCurrentProductChange" :current-page="productPage.page"
        :page-sizes="[1, 2, 3, 4]" :page-size="productPage.size" layout="slot, prev, pager, next" :total="productPage.totalCount"
        background prev-text="上一页" next-text="下一页">

      </el-pagination>
      <el-button :disabled="productPage.page == pageProductCount" @click="selProductPage(pageProductCount)" class="btn-next1">
        末页
      </el-button>
    </div>

    <div class="list" v-show="activeBtn == 'store'">
      <div v-for="(item, index) in shopList" :key="index" class="list-item" @click="jumpData(item)">
        <img :src="item.company_logo_url" class="company-icon" />
        <div class="material">{{ item.company_introduction }}</div>
        <div class="name">{{ item.company_name }}</div>
        <div class="info">
          <div>
            <img src="@/static/engineering5188/goodsAndServices/address.png" />
            <span class="address">{{ item.province }}{{ item.city }}{{ item.district }}</span>
          </div>
          <div class="date">{{ item.created_at ? item.created_at.split(' ')[0] :''}}</div>
        </div>
      </div>
    </div>
    <div class=" nodata" v-show="activeBtn == 'store' && shopList.length == 0">
      暂无数据
    </div>
    <!-- <div class="pagination" v-show="pageCount > 1 && activeBtn=='store'">
      <el-button :disabled="page.page == 1" @click="selPage(1)" class="btn-prev1">
        首页
      </el-button>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
        :page-sizes="[1, 2, 3, 4]" :page-size="page.size" layout="slot, prev, pager, next" :total="page.totalCount"
        background prev-text="上一页" next-text="下一页">

      </el-pagination>
      <el-button :disabled="page.page == pageCount" @click="selPage(pageCount)" class="btn-next1">
        末页
      </el-button>
    </div> -->
  </div>
</template>
<script>


export default {
  name: "searchResult",
  components: {

  },
  props: [],
  data() {
    return {
      onlineTotal: 0,
      storeTotal: 0,
      searchName: '',
      page: {
        size: 15,
        page: 1,
        totalCount: 0,
      },
      showList: [],
      searchResultList: {},
      activeBtn: 'online',

      productList:[],
      productPage: {
        page: 1,
        size: 15,
        totalCount: 0,
      },
      shopList:[],
    };
  },
  watch: {
       '$route.query': {
          handler(newQuery, oldQuery) {
            console.log("newQuery==", newQuery)
            
              this.getProductList(newQuery.keyword);
              this.getShopList(newQuery.keyword);

          },
          immediate: true,
          deep: true
        }
    },
  computed: {
    pageProductCount() {
      let count = 0
      if (this.productPage.totalCount) {
        count = Math.ceil(this.productPage.totalCount / this.productPage.size)
      }
      console.log("count==", count)
      return count;
    },
  },

  created() {
    this.getProductList(this.$route.query.keyword);
    this.getShopList(this.$route.query.keyword);
    this.initData()
  },

  methods: {
    jumpData(item){
            this.$router.push('/companyInfo/index?shop_id='+item.id)
        },
    openDetail(item){
      this.$router.push({
        path: '/companyInfo/product',
        query: {
          shop_id: item.shop_id,
          detail: true,
          id: item.id,
        }
      })
    },
    getShopList(val) {
      this.$httpApi("/api/getShopList", {
            title: val,
            page: this.page.page,
            limit: this.page.size,
        }, "get").then(res=>{
          this.shopList = res.data.list;
          this.page.totalCount = res.data.count;
        }) 
    },
    getProductList(val) {
      this.$httpApi("/api/getProductList", {
            title: val,
            page: this.productPage.page,
            limit: 15,
        }, "get").then(res=>{
          this.productList = res.data.list;
          this.productPage.totalCount = res.data.count;
        })
    },
    handleCurrentProductChange(currentPage) {
      this.page.page = currentPage;
      this.getProductList();
    },
    selProductPage(page) {
      this.page.page = page
    },
    initData() {
      this.searchName = '材料'
      let onlineList = []
      for (let i = 0; i < 15; i++) {
        onlineList.push({
          companyIcon: require(`@/static/engineering5188/goodsAndServices/img_${(i % 5 + 1)}.png`),
          material: '材料名称-莱钢Q235H型钢 Q345bH型钢材金柱钢铁工型钢',
          companyName: '罗田天成钢业有限公司',
          area: '保定',
          subArea: '易县',
          date: '24-03-13'
        })
      }
      let storeList = []
      for (let i = 0; i < 5; i++) {
        storeList.push({
          companyIcon: require(`@/static/engineering5188/goodsAndServices/img_${(i % 5 + 1)}.png`),
          material: '农科院花卉店鲜花绿枝观赏鱼花土花肥种苗',
          companyName: '农科院花卉店',
          area: 'xxxx市场1区-2道-202',

        })
      }
      this.searchResultList = {
        online: {
          list: onlineList,
          total: 100
        },
        store: {
          list: storeList,
          total: 5
        }
      }
      this.onlineTotal = this.searchResultList.online.total;
      this.storeTotal = this.searchResultList.store.total;
      this.activeBtn = 'online'
      this.showData()
    },
    showData() {
      this.page.totalCount = this.searchResultList[this.activeBtn].total;
      this.showList = this.searchResultList[this.activeBtn].list

    },
    handleSizeChange(curSize) {
      this.page.size = curSize
    },
    
    
    selBtn(activeBtn) {
      this.activeBtn = activeBtn
     
    }
  },
};
</script>
<style scoped lang="less">
.searchResult {
  height: auto;
  display: flex;
  max-width: @engineerwidth;
  flex-direction: column;
  min-height: 900px;
  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .list-item {
      margin-top: 20px;
      margin-right: 20px;
      display: flex;
      width: 264px;
      flex-direction: column;
      border: 1px solid #F2F2F2;
      background-color: #fff;
      cursor: pointer;

      .company-icon {
        width: 264px;
        height: 162px;
      }

      .material {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #000000;
        text-align: left;
        font-style: normal;
        margin-top: 12px;
        margin-left: 12px;
        margin-right: 12px;
        white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
        width: 100%; /* 根据需要设置宽度 */
      }

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #858585;
        text-align: left;
        margin: 12px;
      }

      .info {
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;

        img {
          width: 12px;
          height: 16px;

        }

        .address {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #858585;
          text-align: left;
          margin-left: 8px;
        }

        .date {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          text-align: right;
          font-style: normal;
        }
      }

      &:nth-child(5n) {
        margin-right: 0px !important;
      }
    }
  }

  .pagination {
    max-width: @engineerwidth;
    margin: 21px 20px 0px 20px;
    padding-bottom: 41px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    /deep/ .el-pagination .btn-next {
      padding-left: 13px !important;
      padding-right: 13px !important;
      background-color: #fff !important;
      font-family: PingFang-SC-Medium, PingFang-SC-Medium;
      font-weight: normal;
      font-size: 14px;
      color: #7A7A7A;
      font-style: normal;
    }

    /deep/ .el-pagination .btn-prev {
      padding-left: 13px !important;
      padding-right: 13px !important;
      background-color: #fff !important;
      font-family: PingFang-SC-Medium, PingFang-SC-Medium;
      font-weight: normal;
      font-size: 14px;
      color: #7A7A7A;
      font-style: normal;
    }

    /deep/ .el-pager li {
      background-color: #fff !important;
      border-radius: 4px 4px 4px 4px;
      font-family: PingFang-SC-Medium, PingFang-SC-Medium;
      font-weight: normal;
      font-size: 14px;
      color: #7A7A7A;
      font-style: normal;
    }

    /deep/ .el-pager li.active {
      background: #31A41B !important;
    }

    .btn-prev1,
    .btn-next1 {

      padding: 8px 13px !important;

      background-color: #fff !important;
      font-family: PingFang-SC-Medium, PingFang-SC-Medium;
      font-weight: normal;
      font-size: 14px;
      color: #7A7A7A;
      font-style: normal;
      border: 0px !important;
    }
  }

  .btn-box {
    margin-top:24px;
    .btn-nosel {
      background: #FFFFFF;
      border-radius: 30px 30px 30px 30px;
      border: 1px solid #D9D9D9;
      padding: 11px 14px;
      font-family: Arial, Arial;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }

    .btn-sel {
      background: #31A41B;
      border-radius: 30px 30px 30px 30px;
      padding: 11px 14px;
      font-family: Arial, Arial;
      font-weight: bold;
      font-size: 16px;
      color: #FFFFFF;

    }
  }

  .search-tips {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #1D1D1D;
    margin-top: 24px;

    .text-value {
      color: #31A41B;
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
.nodata{
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
    padding: 20px;
}
</style>
